import React, { useState } from 'react'
import {
  Text, View, Image,
} from 'react-native'
import Modal from '@COMPONENTS/modal/Modal'
import EStyleSheet from 'react-native-extended-stylesheet'
import LinearGradientButton from '@COMPONENTS/button/LinearGradient'
import Button from '@COMPONENTS/button/Button'
import Images from '@IMAGE'
import Storage, { StorageKey } from '@UTILS/Storage'
import AnalyticsUtil, { ANALYTICS_EVENT } from '@UTILS/AnalyticsUtil'

const textArr = [
  '在治疗前后，用手指沾一滴水摩擦电极，\n以提高其黏附性。',
  '等待至少5分钟后再重新贴上保护衬垫。',
  '每隔几次处理，或根据需要重复以上操作。',
]
interface ModalProps {
  onPress?: () => void
  visible: boolean
}
const DeviceMaintenance: React.FC<ModalProps> = (props) => {
  const { onPress, visible } = props

  const [check, setCheck] = useState(false)
  const onKnow = () => {
    if (check) {
      Storage.set(StorageKey.deviceMaintenance, true)
      AnalyticsUtil.onEvent(ANALYTICS_EVENT.tap_device_maintenance.eventId)
    }
    onPress?.()
  }
  return (
    <Modal
      visible={visible}
      animationType="fade"
    >
      <View style={styles.bodyStyle}>
        <Image source={Images.home.deviceMaintenance} style={styles.image} />

        <LinearGradientButton style={styles.content} color={['#FFF', '#F7F7F7']}>
          <Text style={styles.title}>电极维护说明</Text>
          {textArr.map((v) => {
            return (
              <View key={v} style={styles.item}>
                <View style={styles.circle} />
                <Text style={styles.desc}>{v}</Text>
              </View>
            )
          })}
        </LinearGradientButton>

        <Button onPress={() => setCheck((v) => !v)} style={styles.item}>
          <Image source={check ? Images.login.checked : Images.login.noCheck} />
          <Text style={styles.tip}>不再提示</Text>
        </Button>

        <LinearGradientButton style={styles.fullWidth} onPress={onKnow}>
          <Text style={styles.fullWidthText}>我知道了</Text>
        </LinearGradientButton>
      </View>
    </Modal>
  )
}

export default DeviceMaintenance

const styles = EStyleSheet.create({
  bodyStyle: {
    width: 295,
    backgroundColor: '$white',
    borderRadius: 12,
    paddingHorizontal: 12,
    paddingVertical: 24,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    marginBottom: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  content: {
    paddingHorizontal: 8,
    paddingTop: 8,
    paddingBottom: 4,
    marginBottom: 20,
    borderRadius: 12,
  },
  title: {
    fontSize: 16,
    fontFamily: 'PingFangSC-Medium',
    fontWeight: '500',
    color: '#333333',
    marginBottom: 16,
    textAlign: 'center',
  },
  item: {
    flexDirection: 'row',
  },
  circle: {
    width: 5,
    height: 5,
    borderRadius: 3,
    marginTop: 8,
    marginRight: 8,
    backgroundColor: 'rgba(124,215,149,0.5)',
  },
  desc: {
    fontSize: 13,
    fontFamily: 'PingFangSC-Regular',
    fontWeight: '400',
    color: '#333',
    marginBottom: 12,
  },
  tip: {
    paddingLeft: 10,
    fontSize: 12,
    fontFamily: 'PingFangSC-Light',
    fontWeight: '300',
    color: '#595959',
    marginBottom: 12,
  },

  fullWidth: {
    width: 263,
    height: 45,
    borderRadius: 23,
  },
  fullWidthText: {
    paddingVertical: 12,
    fontSize: 15,
    fontFamily: 'PingFangSC-Medium',
    fontWeight: '500',
    color: '$white',
    textAlign: 'center',
  },
})
